<template>
  <t-dialog v-model:visible="addbox"  @confirm="submittask">
    <p>{{ count }}</p>
    <t-space direction="vertical">
    <p class="task-text">Add Task</p>
    <t-input v-model="taskname" label="Taskname:"  placeholder="taskname" />
    <t-input v-model="during" label="During:" suffix="min" placeholder="during" />
    <t-input v-model="description" label="Description:"  placeholder="description" />
    <t-select v-model="prority" label="Prority:" valueType="value" >
          <t-option key="high" value="high" />
          <t-option key="middle"  value="middle"/>
          <t-option key="low"  value="low" />
    </t-select>
    <t-select v-model="category" label="Category:" valueType="value" >
          <t-option key="work" value="work" />
          <t-option key="rest"  value="rest"/>
          <t-option key="play" value="play" />
          <t-option key="shop" value="shop" />
          <t-option key="others" value="others" />
    </t-select>
  </t-space>
      </t-dialog>
<div class="taskbox">

  <div class="left-botton">
    <t-button @click="addbox=true" class="botton" shape="circle" size="large">
      <t-icon name="pen-ball"></t-icon>
    </t-button>
  </div>

  <div class="card">
        <t-icon name="gesture-right" style="z-index: 1 ;float: left;" size="35px" ></t-icon>
        <div class="blue-box"><p style="white-space: nowrap; color: white; font-weight: bold;">To be done</p></div>
  
  <ul >
    <li v-for="task in tasks" :key="task.name" class="box-task-text" >
      <div class="task-item-box">{{ task.taskname }}<span class="space"></span> {{ task.during }}min<span class="space"></span>{{ task.description }}<span class="space"></span>{{task.prority }}<span class="space"></span>{{ task.category }}
      
      <t-button @click="starttask" class="startbotton" >start</t-button>
    </div>
    </li>
  </ul>
 
  </div>
</div>
<div class="finishedtaskbox">
      <div class="card">
        <t-icon name="logo-twitter" style="z-index: 1 ;float: left;" size="35px" ></t-icon>
        <div class="blue-box"><p style="white-space: nowrap; color: white; font-weight: bold;">Already Done</p></div>
  </div>
</div>
  </template>
<script>
  export default {

  data() {
    return {
      newTask: "",
      tasks: [],
      addbox:false,
      taskname:"sleep",
      during:30,
      description:"i love sleep",
      prority:"",
      category:"",
      count:0,
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== "") {
        this.tasks.push(this.newTask);
        this.newTask = "";
      }
    },
    // generateShortId() {
    //   // 生成相对较短的 task_id，可以使用时间戳和随机数
    //   return (new Date().getTime() + Math.floor(Math.random() * 1000))%100;
    // },
    submittask()
    {
      this.count++;
      const task = {
        // task_id: generateUniqueId(),
        taskname: this.taskname,
        during: this.during,
        description: this.description,
        prority:this.prority,
        category:this.category,
      };
      this.tasks.push(task);
      this.cleartask()
//       for (const obj of tasks) {
//         for (const key in obj) {
//           if (obj.hasOwnProperty(key)) {
//           const value = obj[key];
//           console.log(key + ": " + value);
//     }
//   }
// }
    },
    cleartask()
    {
      this.taskname="",
      this.during=0,
      this.description="",
      this.count=0
    },
    starttask()
    {
      const task={
        taskname:"sleep",
        during:30
      }
      const data=JSON.stringify(task)
      this.$router.push({path:'/clock',query: {data:data}})
    }
  },
  
};
</script>
<style>
  .left-botton
  {
    position: absolute;
    z-index: 1;
    top:0px;
    left:550px;
  }
  .card {
  border: 1px solid #ccc;
  border-radius: 10px; /* 设置圆角 */
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 600px;
  height: 250px;
  opacity: 1;
  border-radius: 40px;
 
  }
  .taskbox{
    position: absolute;
    top: 120px; /* 垂直居中 */
    left: 550px; /* 水平居中 */
    z-index: 0;
  }
  .finishedtaskbox{
    position: absolute;
    top:420px;
    left:550px;
    z-index: 0;
  }
  .blue-box
  {
    border: 1px solid #ccc;
    border-radius: 10px; /* 设置圆角 */
    padding: 20px;
    background-color: rgba(70, 115, 228, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 120px;
    height: 25px;
    opacity: 1;
    border-radius: 40px;
    left:35px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .task-text {
  font-family: "Arial", sans-serif; /* 设置字体样式 */
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  color: #333; /* 设置字体颜色 */
}
ul {
  list-style-type: none; /* 移除小点 */
  padding: 0;/* 去除默认的内边距 */
}
.startbotton
{
  justify-content: center;
  align-items:center;
  margin-left: auto;

}
.task-item-box
{
    border: 1px solid #ccc;
    border-radius: 10px; /* 设置圆角 */
    padding: 20px;
    background-color: rgba(117, 70, 228, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 25px;
    opacity: 1;
    border-radius: 40px;
    left:35px;
    display: flex;
    justify-content: left; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.box-task-text
{
  font-family: "Arial", sans-serif; /* 设置字体样式 */
  font-size: 20px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  color: #faf5f5; /* 设置字体颜色 */
}
.space
{
  width:5%
}
</style>